<template>
  <div class="content-body">
    <div
      v-if="query !== undefined && query !== null && query.length > 0"
      class="query-custom"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        size="small"
        label-width="120px"
      >
        <el-form-item
          v-for="(item, index) in query"
          :key="'query-' + index"
          :label="item.label"
          :prop="item.column"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-input
            v-if="item.type === 1"
            v-model="form[item.column]"
            clearable
            :placeholder="item.label"
          />
          <el-date-picker
            v-if="item.type === 2"
            v-modell="form[item.column]"
            format="yyyy/MM/dd"
            type="date"
            :placeholder="item.label"
            clearable
          />
          <el-time-select
            v-if="item.type === 3"
            v-model="form[item.column]"
            :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
            :placeholder="item.label"
            clearable
          />
          <el-date-picker
            v-if="item.type === 4"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-date-picker
            v-if="item.type === 5"
            v-model="form[item.column]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy/MM/dd HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item style="margin-top: 10px;margin-bottom: 10px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="queryEntity"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="article-body">
      <div v-if="column" class="custom-ul-header">
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in column"
            :key="'label-' + index"
            :span="item.width"
          >{{ item.label }}</el-col>
        </el-row>
      </div>
      <el-empty
        v-if="dataList === null || dataList.length === 0"
        :image-size="100"
      />
      <div v-else>
        <div
          v-for="(obj, index) in dataList"
          :key="'obj-' + index"
          class="custom-ul-li"
          @click="openEntity(obj)"
        >
          <el-row :gutter="5">
            <el-col
              v-for="(item, index) in column"
              :key="'td-' + index"
              :span="item.width"
            >
              {{ obj[item.column] }}
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="query-pager">
      <el-pagination
        :current-page="form.page"
        :page-size="form.size"
        :total="pagerSize"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import {
  analysisEntityList,
  analysisGuestEntityList
} from '@/api/portal/manager/analysis'
import { getToken } from '@/utils/auth'
export default {
  name: 'ServerEntityList',
  props: {
    params: {
      type: Array
    },
    fwid: {
      type: Number
    },
    temp: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      column: [],
      dataList: [],
      pagerSize: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      query: [],
      entity: {},
      form: {
        page: 1,
        size: 10,
        fwid: null
      }
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          this.query = newName.query
          this.column = newName.dataList
          this.entity = newName.entity
          this.form.fwid = this.fwid
          if (this.params !== null && this.params.length > 0) {
            this.params.forEach(item => {
              this.form[item.code] = item.value
            })
          }
          this.initData()
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    queryEntity() {
      this.form.page = 1
      this.initData()
    },
    handleCurrentChange(obj) {
      this.form.page = obj
      this.initData()
    },
    handleSizeChange(obj) {
      this.form.size = obj
      this.form.page = 1
      this.initData()
    },
    openEntity(data) {
      // 打开详情页
      if (this.entity.isOpen) {
        // 允许打开详情页
        window.open(data[this.entity.url], '_blank')
      }
    },
    initData() {
      if (getToken()) {
        analysisEntityList(this.form)
          .then(res => {
            const { data } = res
            if (undefined !== data.dataList && data.dataList !== null) {
              this.dataList = data.dataList
              this.pagerSize = data.pager.totalElements
            }
          })
          .catch(() => {
            this.dataList = []
          })
      } else {
        analysisGuestEntityList(this.form)
          .then(res => {
            const { data } = res
            if (undefined !== data.dataList && data.dataList !== null) {
              this.dataList = data.dataList
              this.pagerSize = data.pager.totalElements
            }
          })
          .catch(() => {
            this.dataList = []
          })
      }
    }
  }
}
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-custom,
.query-pager {
  flex: 0 1 auto;
  min-height: 50px;
  border-bottom: 1px solid #dcdfe6;
}
.query-pager {
  height: 40px;
}
.article-body {
  flex: 1 1 auto;
  overflow: hidden;
  height: inherit;
}

.custom-ul-header {
  font-weight: 600;
  text-align: left;
}

.custom-ul-li,
.custom-ul-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ebeef5;
}

.custom-ul-li:nth-child(even) {
  background-color: #fafafa;
}

.custom-ul-li:nth-child(odd) {
  background-color: #ffffff;
}

.custom-ul-li:hover {
  background-color: #e6effb;
  cursor: pointer;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
